<template>
    <div class="index">
        <van-nav-bar title="提现记录" left-arrow @click-left="backUp" />
        <ul>
            <li v-for="item in record" :key="item.withdrawLogId">
                <img v-if="item.tradePlatform==1" src="../../assets/imgList/pay2.png" alt />
                <img v-if="item.tradePlatform==2" src="../../assets/imgList/pay1.png" alt />
                <img v-if="item.tradePlatform==3" src="../../assets/imgList/pay3.png" alt />
                <div class="desc">
                    <p>
                        <span>提现-提现至{{item.tradePlatformDesc}}</span>
                        <span class="money">¥{{item.amount}}</span>
                    </p>
                    <p>
                        <span class="time">{{item.createTime}}</span>
                        <span class="status">{{item.statusDesc}}</span>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    import { NavBar, Field, Button, Toast } from "vant";
    import api from "@/utils/restful.js";

    export default {
        components: {
            [NavBar.name]: NavBar,
            [Field.name]: Field,
            [Button.name]: Button,
            [Toast.name]: Toast
        },
        data() {
            return {
                record:{}
            };
        },
        mounted() {
            this.withdrawalRecord();
        },
        methods: {
            // 提现记录
            withdrawalRecord() {
                this.$axios({
                    method: "POST",
                    url: api.withdrawLog,
                    params: {
                        token: localStorage.getItem("token")
                    }
                }).then(res => {
                    console.log(res.data);
                    this.record = res.data;
                });
            },
            backUp() {
                this.$router.go(-1);
            }
        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";
    .index {
        min-height: 100vh;
        background-color: #fff;
    }
    ul {
        li {
            height: 80px;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .font-dpr(15px);
            border-top: 1px solid #f2f2f2;
            border-bottom: 1px solid #f2f2f2;
            img {
                width: 30px;
                height: 30px;
                margin-right: 15px;
            }

            .desc {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
                p {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .type {
                        color: #232323;
                    }
                    .money {
                        .font-dpr(24px);
                        color: #232323;
                    }

                    .time {
                        .font-dpr(12px);
                        color: #b2b2b2;
                    }

                    .status {
                        .font-dpr(12px);
                        color: #e4b445;
                    }
                }
            }
        }
    }
</style>